import { useMemo } from "react";
import { Navigate, useRoutes } from "react-router-dom";
import { connect } from "react-redux";
import { RouteObject } from "@/routers/interface";
import { buildRoutesAction } from "./utils/routeHelper";
import { mergeSamePathRoute } from "@/utils/util";
import basicRoutes from "./basic";

export const AppRoutes: RouteObject[] = [
	...basicRoutes,
	{
		path: "*",
		element: <Navigate to="/404" />
	}
];

const Router = (props: any) => {
	const { backMenuList } = props;

	// must use "useMemo" rather than "useEffect", calculate only once.
	const routes = useMemo(() => {
		const routes = buildRoutesAction();
		return mergeSamePathRoute(AppRoutes, routes);
	}, [backMenuList]);

	return useRoutes(routes);
};

const mapStateToProps = (state: any) => state.permission;
export default connect(mapStateToProps, null)(Router);
